import React, { Component, createRef } from 'react';
// 非受控组件:
// 表单中的元素的value 不受state 的控制
// 特点: 没有实现双向数据绑定
// 语法: 使用ref属性 +defaultvalue

class Mycls1 extends Component {
    // constructor() {
    //     super()
    //     this.state = {
    //         username: '程咬金',
    //         ref1: createRef()
    //     }
    // }
    state = {
        username: '程咬金',
        // ref1: createRef()
        sex: '男',
        checkedArr: ["情人", "妻子"],
        seld: '20k'
    }
    ref1 = createRef();
    ref2 = createRef();
    ref3 = createRef();
    ref4 = createRef();
    render() {
        const { username, sex, checkedArr, seld } = this.state
        return (
            <div>
                {/* 输入框 */}
                <p>
                    <input ref={this.ref1} type='text' defaultValue={username} />
                </p>
                {/* 单选 */}
                <p ref={this.ref2}>
                    <input type='radio' name='sex' value='男' defaultChecked={sex == '男'} /> 男
                    <input type='radio' name='sex' value='女' defaultChecked={sex == '女'} /> 女
                </p>

                <button onClick={() => { this.submitFn() }}>提交表单</button>
                {/* 复选框 */}
                <p ref={this.ref3}>
                    <input type='checkbox' defaultChecked={checkedArr.includes('情人')} />情人
                    <input type='checkbox' defaultChecked={checkedArr.includes('妻子')} />妻子
                    <input type='checkbox' defaultChecked={checkedArr.includes('小三')} />小三
                </p>
                {/* 下拉框 */}
                <p>
                    <select defaultValue={seld} ref={this.ref4}>
                        <option value='10k'>10k</option>
                        <option value='20k'>20k</option>
                        <option value='30k'>30k</option>
                    </select>
                </p>
            </div>
        );
    };
    // 提交表单
    submitFn() {
        // 获取表单中的值
        console.log(this.ref1.current);
        console.log(Array.from(this.ref2.current.children));
        Array.from(this.ref2.current.children).forEach(item => {
            if (item.checked) {
                console.log(item.value);
            }
        });

        console.log(this.ref4.current.value);



    }
}

export default Mycls1;
